<template>
  <div class="company-info">
    <el-form
      class="company-info-form"
      ref="form"
      :model="formData"
      :rules="rules"
      label-width="100px"
      size="small"
      inline
    >
      <Panel title="注册信息" icon="zhucechenggong">
        <el-row class="info-row">
          <el-col :span="8">
            <span class="info-label">{{ $tLabel('company.companyCode') }}</span>
            <span class="info-text">{{ userInfo.companyCode }}</span>
          </el-col>
          <el-col :span="8">
            <span class="info-label">{{ $tLabel('field.registerTime') }}</span>
            <span class="info-text">{{ userInfo.registerTime }}</span>
          </el-col>
          <el-col :span="8">
            <span class="info-label">{{ $tLabel('field.lastLoginTime') }}</span>
            <span class="info-text">{{ userInfo.lastLoginTime }}</span>
          </el-col>
        </el-row>
        <el-row class="info-row">
          <el-col :span="8">
            <span class="info-label">{{
              $tLabel('field.registerAccount')
            }}</span>
            <span class="info-text">{{ userInfo.account }}</span>
          </el-col>
        </el-row>
      </Panel>
      <Panel title="基本信息" icon="jibenxinxi">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="companyName" :label="$t('company.companyName')">
              <el-input
                v-model="formData.companyName"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="companyScale"
              :label="$t('company.companyScale')"
            >
              <el-select
                v-model="formData.companyType"
                :placeholder="$tSelect()"
              >
                <el-option
                  v-for="item in dictData['company_scale']"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="address" :label="$t('company.address')">
              <el-input
                v-model="formData.address"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="companyType" :label="$t('company.companyType')">
              <el-select
                v-model="formData.companyType"
                :placeholder="$tSelect('')"
              >
                <el-option
                  v-for="item in dictData['company_type']"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="contactName" :label="$t('field.contactName')">
              <el-input
                v-model="formData.contactName"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="contactMobile"
              :label="$t('field.contactMobile')"
            >
              <el-input
                v-model="formData.contactMobile"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item prop="contactEmail" :label="$t('field.contactEmail')">
              <el-input
                v-model="formData.contactEmail"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="reservedContactName"
              :label="$t('field.reservedContactName')"
            >
              <el-input
                v-model="formData.reservedContactName"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              prop="reservedContactMobile"
              :label="$t('field.reservedContactMobile')"
            >
              <el-input
                v-model="formData.reservedContactMobile"
                :placeholder="$tInput()"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </Panel>
      <Panel title="企业信息认证" icon="renzheng">
        <div class="info-group">
          <div class="info-group-title">社会统一信用码</div>
          <div class="info-group-content">
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item prop="socialCreditCode">
                  <el-input
                    v-model="formData.socialCreditCode"
                    :placeholder="$tInput()"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="info-group">
          <div class="info-group-title">营业执照备案</div>
          <div class="info-group-content">
            <Upload
              :multiple="false"
              v-model="formData.businessLicenses"
              :show-file-list="false"
              single
            >
              <div class="upload-content">
                <img
                  class="upload-img"
                  :src="formData.businessLicenses[0].url"
                  v-if="formData.businessLicenses.length > 0"
                />
                <template v-else>
                  <div class="upload-empty-icon">
                    <i class="el-icon-plus"></i>
                  </div>
                  <div class="upload-empty-text">请上传您的营业执照</div>
                </template>
              </div>
            </Upload>
          </div>
        </div>
        <div class="info-group">
          <div class="info-group-title">联系人身份证备案</div>
          <div class="info-group-content">
            <Upload
              :multiple="false"
              v-model="formData.idCardFronts"
              :show-file-list="false"
              single
              class="float-left"
            >
              <div class="upload-content">
                <img
                  class="upload-img"
                  :src="formData.idCardFronts[0].url"
                  v-if="formData.idCardFronts.length > 0"
                />
                <template v-else>
                  <div class="upload-empty-icon">
                    <i class="el-icon-plus"></i>
                  </div>
                  <div class="upload-empty-text">点击上传正面像</div>
                </template>
              </div>
            </Upload>
            <Upload
              :multiple="false"
              v-model="formData.idCardBacks"
              :show-file-list="false"
              single
              style="margin-left:22px"
            >
              <div class="upload-content">
                <img
                  class="upload-img"
                  :src="formData.idCardBacks[0].url"
                  v-if="formData.idCardBacks.length > 0"
                />
                <template v-else>
                  <div class="upload-empty-icon">
                    <i class="el-icon-plus"></i>
                  </div>
                  <div class="upload-empty-text">点击上传国徽面</div>
                </template>
              </div>
            </Upload>
          </div>
        </div>
        <div class="info-group">
          <div class="info-group-title">联系人身份证明函</div>
          <div class="info-group-content">
            <Upload
              :multiple="false"
              v-model="formData.certificationLetters"
              :show-file-list="false"
              single
            >
              <div class="upload-content">
                <img
                  class="upload-img"
                  :src="formData.certificationLetters[0].url"
                  v-if="formData.certificationLetters.length > 0"
                />
                <template v-else>
                  <div class="upload-empty-icon">
                    <i class="el-icon-plus"></i>
                  </div>
                  <div class="upload-empty-text">请上传您的备案照片</div>
                </template>
              </div>
            </Upload>
          </div>
        </div>
        <div class="app-btns">
          <el-button
            size="small"
            type="primary"
            @click="submitForm"
            :loading="submiting"
            >保存</el-button
          >
        </div>
      </Panel>
    </el-form>
  </div>
</template>

<script>
import { dictMixin } from 'mixins'
import { Panel, Upload } from 'components'
import { updateInfo } from 'services/company/company'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'CompanyInfo',
  mixins: [dictMixin],
  dicts: ['company_type', 'company_scale'],
  components: { Panel, Upload },
  data() {
    return {
      formData: {},
      submiting: false
    }
  },
  computed: {
    ...mapState(['userInfo']),
    rules() {
      return {
        companyName: this.$rule('company.companyName', {
          required: true
        }),
        socialCreditCode: this.$rule('field.socialCreditCode', {
          required: true
        }),
        contactName: this.$rule('field.contactName', {
          required: true
        }),
        contactMobile: this.$rule('field.contactMobile', {
          required: true
        }),
        companyType: this.$rule('company.companyType', {
          required: true,
          trigger: 'blur'
        }),
        companyScale: this.$rule('company.companyScale', {
          required: true,
          trigger: 'blur'
        }),
        address: this.$rule('company.address', {
          required: true
        })
      }
    }
  },
  methods: {
    ...mapMutations({
      setUserInfo: 'setUserInfo'
    }),
    async submitForm() {
      try {
        await this.$refs.form.validate()
        this.submiting = true
        const { data } = await updateInfo(this.formData)
        this.setUserInfo(data)
      } finally {
        this.submiting = false
      }
    }
  },
  created() {
    this.formData = { ...this.userInfo }
  }
}
</script>

<style lang="scss">
@import 'styles/common.scss';
.company-info-form {
  padding-top: 0 !important;
}
.company-info {
  .panel {
    margin-top: 0.2rem;
    &:first-child {
      margin-top: 0;
    }
  }
  .company-info-form {
    padding: 0.2rem 0;
    .el-form-item {
      display: flex;
    }
    .el-form-item__content {
      flex: 1;
      width: 100% !important;
    }
    .el-input {
      width: 100%;
    }
  }
  .upload-content {
    width: 4.68rem;
    height: 2.83rem;
    background: #f6f6f6;
    border: 1px solid #eeeeee;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #aaa;
    overflow: hidden;
    font-size: 18px;
    .upload-empty-icon {
      @include circle(38px);
      display: inline-flex;
      justify-content: center;
      align-items: center;
      background-color: $colorPrimary;
      color: #fff;
    }
    .upload-empty-text {
      margin-top: 23px;
    }
    .upload-img {
      width: 100%;
    }
  }
}
</style>
